<template>
  <Card :shadow="shadow">
    <div class="card-name"><div class="name width1">代付通道</div></div>
    <div class="content-con">
      <div class="bank-add"><i-button size="large" class="btn-green" @click="add">新增</i-button></div>
      <div class="bank-form">
        <div class="form-item">
          <i-table :columns="foodColumns" :data="foodData"></i-table>
          <!-- table组件 -->
        </div>
        <div class="page">
          <Page
            :id="pageId"
            :total="dataCount"
            :page-size="pageSize"
            style="float: left;"
            @on-change="changepage"
            @on-page-size-change="nowPageSize"
            show-total
            show-sizer
            show-elevator
          ></Page>
          <!-- page组件 -->
          <Button style="float: left;margin-left: 10px;" type="primary" @click="goElevatorPage">确认</Button>
        </div>
      </div>
    </div>
  </Card>
</template>
<script>
import { channellist, delChannel } from '@/api/channel'
export default {
  // name: 'paid_channel',
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      value: '',
      pageId: 'targetpage',
      ajaxHistoryData: [],
      exportdata: [],
      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      pageSize: 10,
      pageCurrent: 1, // 当前页
      foodColumns: [
        {
          title: '通道ID',
          key: 'id',
          width: 60
        },
        {
          title: '通道名称',
          key: 'channel_name',
          width: 120
        },
        {
          title: 'api地址',
          key: 'api_url',
          width: 205
        },
        {
          title: '单笔费用(/笔)',
          key: 'sing_fee',
          width: 100
        },
        {
          title: '通道费率(%)',
          key: 'poundage',
          width: 100
        },
        {
          title: '费率模式',
          key: 'poundage_model',
          width: 120,
          render: (h, params) => {
            const poundage_model = params.row.poundage_model
            if (poundage_model === 0) {
              return h('span', '比例')
            } else if (poundage_model === 1) {
              return h('span', '单笔')
            } else if (poundage_model === 2) {
              return h('span', '比例+单笔')
            }
          }
        },
        {
          title: '当天最大限额',
          key: 'max_day',
          width: 120
        },
        {
          title: '交易开始时间',
          key: 's_time',
          width: 145
        },
        {
          title: '交易结束时间',
          key: 'e_time',
          width: 145
        },
        {
          title: '状态',
          key: 'status',
          width: 100,
          render: (h, params) => {
            const statusName = params.row.status == '0' ? '开启' : '关闭'
            if (statusName == '开启') {
              return h(
                'span',
                {
                  style: {
                    color: '#4daa5d'
                  }
                },
                statusName
              )
            } else if (statusName == '关闭') {
              return h(
                'span',
                {
                  style: {
                    color: 'red'
                  }
                },
                statusName
              )
            }
          }
        },
        {
          title: '风控开关',
          key: 'risk_control',
          width: 100,
          render: (h, params) => {
            const risk_control = params.row.risk_control == '0' ? '关闭' : '开启'
            if (risk_control == '关闭') {
              return h(
                'span',
                {
                  style: {
                    color: '#ff5500'
                  }
                },
                risk_control
              )
            } else if (risk_control == '开启') {
              return h(
                'span',
                {
                  style: {
                    color: '#00aaff'
                  }
                },
                risk_control
              )
            }
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    size: 'small'
                  },
                  style: {
                    color: 'white',
                    padding: '0 5px',
                    marginLeft: '18px',
                    height: '24px',
                    fontSize: '12px',
                    backgroundColor: '#009688'
                  },
                  on: {
                    click: () => {
                      this.$router.push({
                        name: 'channel-edit',
                        params: { row: params.row }
                      })
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    size: 'small',
                    type: 'error'
                  },
                  style: {
                    color: 'white',
                    padding: '0 5px',
                    marginLeft: '18px',
                    height: '24px',
                    fontSize: '12px'
                  },
                  on: {
                    click: () => {
                      this.del(params.row.id)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      foodData: []
    }
  },
  methods: {
    getList () {
      let data = {
        pageCurrent: this.pageCurrent,
        pageSize: this.pageSize
      }
      channellist(data)
        .then(res => {
          this.foodData = res.data.data
          this.dataCount = res.data.count
          console.log(this.foodData)
        })
        .catch(err => {
          this.$Message.error(err.msg)
        })
    },

    // 点击切换页面
    changepage (index) {
      this.pageCurrent = index
      this.getList()
    },
    // 每页显示的数据条数
    nowPageSize (index) {
      // 实时获取当前需要显示的条数
      this.pageSize = index
      this.getList()
    },

    // 点击确认，跳转到输入的页码
    goElevatorPage () {
      var evtObj
      var thisPage = document.getElementById(this.pageId)
      // var thisPage=this.$refs.myPage;//也可以用ref来获取page这个dom
      var elevatorDiv = thisPage.getElementsByClassName('ivu-page-options-elevator')
      // 如果thisPage这里报错了,请核对上文的获取page的DOM的语句是否获取不到
      if (elevatorDiv && elevatorDiv.length > 0) {
        var pageInput = elevatorDiv[0].getElementsByTagName('input')[0]
        if (window.KeyEvent) {
          // firefox 浏览器下模拟事件
          evtObj = document.createEvent('KeyEvents')
          evtObj.initKeyEvent('keyup', true, true, window, true, false, false, false, 13, 0)
        } else {
          // chrome 浏览器下模拟事件
          evtObj = document.createEvent('UIEvents')
          evtObj.initUIEvent('keyup', true, true, window, 1)
          delete evtObj.keyCode
          if (typeof evtObj.keyCode === 'undefined') {
            // 为了模拟keycode
            Object.defineProperty(evtObj, 'keyCode', { value: 13 })
          } else {
            evtObj.key = String.fromCharCode(13)
          }
        }
        pageInput.dispatchEvent(evtObj)
      }
    },
    // 新增
    add () {
      this.$router.push({ name: 'channel-add' })
    },

    del (id) {
      this.$Modal.confirm({
        title: '确认信息',
        content: '确认删除ID:' + id + '通道?',
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
          delChannel(id)
            .then(res => {
              this.$Message.success(res.msg)
              this.getList()
            })
            .catch(res => {
              this.$Message.error(res.msg)
            })
        }
      })
    }
  },
  created () {
    this.getList()
  }
}
</script>
<style lang="less"></style>
